<template>
	<div class="two-column">
		<div class="top">
			<div class="title">
				<div class="t_left">
					<template v-if="slots['top-title'] || props.topTitle">
						<template v-if="props.topTitle">{{ props.topTitle }}</template>
						<slot v-else name="top-title"></slot>
					</template>
					<template v-else>
						<template v-if="props.topTitleLeft">{{ props.topTitleLeft }}</template>
						<slot v-else name="top-title-left"></slot>
					</template>
				</div>
				<div class="t_right">
					<template v-if="!slots['top-title'] && !props.topTitle">
						<template v-if="props.topTitleRight">{{ props.topTitleRight }}</template>
						<slot v-else name="top-title-right"></slot>
					</template>
				</div>
			</div>
			<div class="content scroll">
				<slot name="top-comtent"></slot>
			</div>
		</div>
		<div class="bottom">
			<div class="title">
				<div class="t_left">
					<template v-if="slots['bottom-title'] || props.bottomTitle">
						<template v-if="props.bottomTitle">{{ props.bottomTitle }}</template>
						<slot v-else name="bottom-title"></slot>
					</template>
					<template v-else>
						<template v-if="props.bottomTitleLeft">{{ props.bottomTitleLeft }}</template>
						<slot v-else name="bottom-title-left"></slot>
					</template>
				</div>
				<div class="t_right">
					<template v-if="!slots['bottom-title'] && !props.bottomTitle">
						<template v-if="props.bottomTitleRight">{{ props.bottomTitleRight }}</template>
						<slot v-else name="bottom-title-right"></slot>
					</template>
				</div>
			</div>
			<div class="content scroll">
				<slot name="bottom-comtent"></slot>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
const slots = defineSlots();

const props = defineProps({
	topTitle: String,
	topTitleLeft: String,
	topTitleRight: String,
	bottomTitle: String,
	bottomTitleLeft: String,
	bottomTitleRight: String,
});
</script>

<style scoped lang="scss">
.two-column {
	width: 300px;
	height: 100%;
	background-color: var(--fill-color-5);
	display: flow-root;
	& > div {
		padding: 0 10px;
		display: flex;
		flex-direction: column;
		.title {
			font-size: 12px;
			line-height: 24px;
			color: var(--text-color-3);
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 24px;
			& > div {
				height: 100%;
				display: flex;
				align-items: center;
			}
			.t_left {
				justify-content: flex-start;
				flex: 1;
			}
			.t_right {
				justify-content: flex-end;
			}
		}
		.content {
			flex: 1;
			box-shadow: 0 0 0 1px var(--border-color-3) inset;
			border-radius: 4px;
		}
	}
	.top {
		height: calc(50% - 15px);
		margin: 10px 0 10px;
	}
	.bottom {
		height: calc(50% - 15px);
	}
}
</style>
